<template>
  <div class="view-container" v-loading.body="loading">
    <empty v-if="taskCount <= 0" :inline="false">暂无待办事项</empty>

    <template v-if="taskCount > 0">

      <div>您有{{taskCount}}个待办事项</div>
      <div class="dashboard-list-wp">
        <div v-for="(task,index) in sortedList" :key="index">
          <el-card v-if="task.count" class="dashboard-card">
            <div slot="header" class="clearfix">
              <span>{{task.title}}</span>
              <el-badge class="mark" :value="task.count"/>
            </div>
            <div class="card-body">
              {{task.content}}
            </div>
            <div class="dashboard-card-footer">
              <el-button type="primary" size="small" @click.stop.prevent="action(task.type)">
                {{task.indexLinkInfoBean.name}}
              </el-button>
            </div>
          </el-card>
        </div>
      </div>
    </template>

  </div>
</template>

<script>
  import {setTab} from '@/utils/order';
  import {setTab as setGoodsTab} from '@/utils/list';
  import {mapGetters} from 'vuex';
  import Empty from '@/components/Empty';
  import ElCard from "../../../node_modules/element-ui/packages/card/src/main";

  import {getDashboardTask} from '@/api/dashboard';

  export default {
    name: 'dashboard',
    components: {
      ElCard,
      'empty': Empty,
    },
    data()
    {
      return {
        loading: false,
        taskCount: 0, //任务数量（包含所有任务）
        taskList: [
          {
            title: '',
            count: 0,
            content: '',
            sort: 0, //排序顺序
            type: '', //操作类型
            indexLinkInfoBean: {
              name: '', //按钮名称
              url: '', //没用的
            },
          },
        ],
      }
    },
    mounted()
    {
      this.loading=true;
      getDashboardTask().then(resp=>{
        this.taskCount = resp.data.backlogCount || 0;
        this.taskList = resp.data.list || [];

        setTimeout(()=>{
          this.loading=false;
        },300);
      }).catch(err=>{
        setTimeout(()=>{
          this.loading=false;
        },300);
      });

      /*let resp = {
        "code": 200,
        "data": {
          "backlogCount": 2,
          "list": [{
            "content": "您有0个订单被用户催促发货，请尽快准备好商品进行发货",
            "count": 1,
            "indexLinkInfoBean": {"name": "去发货", "url": ""},
            "sort": 1,
            "title": "催发货提醒",
            "type": "CUIFAHUO_QUFAHUO"
          }, {
            "content": "您暂时没有商品需要处理",
            "count": 2,
            "indexLinkInfoBean": {"name": "去发货", "url": ""},
            "sort": 2,
            "title": "发货提醒",
            "type": "FAHUO_QUFAHUO"
          }, {
            "content": "您有0个商品审核通过，请尽快设置库存并上架",
            "count": 3,
            "indexLinkInfoBean": {"name": "去上架", "url": ""},
            "sort": 3,
            "title": "审核通过提醒",
            "type": "SHENGHEPASS_QUSHANGJIA"
          }, {
            "content": "您有0个商品审核失败，请尽快编辑后重新提交审核",
            "count": 4,
            "indexLinkInfoBean": {"name": "去编辑", "url": ""},
            "sort": 4,
            "title": "审核不通过提醒",
            "type": "SHENGHENOPASS_QUBIANJI"
          }, {
            "content": "您有130个订单已在退还途中，请跟踪物流注意查收商品，及时确认收货",
            "count": 5,
            "indexLinkInfoBean": {"name": "去查看", "url": ""},
            "sort": 8,
            "title": "退还中提醒",
            "type": "TUIHUANZHONG_QUCHAKAN"
          }, {
            "content": "您有130个订单已在退还途中，请跟踪物流注意查收商品，及时确认收货",
            "count": 6,
            "indexLinkInfoBean": {"name": "去处理", "url": ""},
            "sort": 9,
            "title": "已退还提醒",
            "type": "YITUIHUAN_QUCHULI"
          },{
            "content": "您有130个订单已在退还途中，请跟踪物流注意查收商品，及时确认收货",
            "count": 7,
            "indexLinkInfoBean": {"name": "去处理", "url": ""},
            "sort": 9,
            "title": "赔偿逾期去查看",
            "type": "PEICHANGYUQI_QUCHAKAN"
          },{
            "content": "您有130个订单已在退还途中，请跟踪物流注意查收商品，及时确认收货",
            "count": 6,
            "indexLinkInfoBean": {"name": "去处理", "url": ""},
            "sort": 9,
            "title": "租赁逾期去查看",
            "type": "ZULINYUQI_QUCHAKAN"
          },
            {
              "content": "您有130个订单已在退还途中，请跟踪物流注意查收商品，及时确认收货",
              "count": 6,
              "indexLinkInfoBean": {"name": "去处理", "url": ""},
              "sort": 9,
              "title": "退还逾期去查看",
              "type": "TUIHUANYUQI_QUCHAKAN"
            }]
        },
        "message": "SUCCESS"
      };
      this.taskCount = resp.data.backlogCount || 0;
      this.taskList = resp.data.list || [];*/
    },
    computed: {
      sortedList()
      {
        return this.taskList.sort((a, b) => {
          return a.sort > b.sort;
        });
      },
      ...mapGetters([])
    },
    methods: {
      action(actionName)
      {

        switch (actionName)
        {
          case 'CUIFAHUO_QUFAHUO'://催发货，去发货
          {
            setTab('reservation-pending-deliver');
            this.$router.push({name: 'orderReservation'});
            break;
          }
          case 'FAHUO_QUFAHUO'://去发货
          {
            setTab('reservation-pending-deliver');
            this.$router.push({name: 'orderReservation'});
            break;
          }
          case 'SHENGHEPASS_QUSHANGJIA'://审核通过，去上架
          {
              setGoodsTab('product-status-in-storage');
            this.$router.push({name: 'goodsList'});
            break;
          }
          case 'SHENGHENOPASS_QUBIANJI':// 审核不通过，去编辑
          {
              setGoodsTab('product-status-check-failure');
            this.$router.push({name: 'goodsList'});
            break;
          }
          case 'TUIHUANZHONG_QUCHAKAN':// 退还中，去查看
          {
            setTab('return-ing');
            this.$router.push({name: 'orderReturn'});
            break;
          }
          case 'YITUIHUAN_QUCHULI':// 已退还，去处理
          {
            setTab('return-ed');
            this.$router.push({name: 'orderReturn'});
            break;
          }
          case 'TUIHUANYUQI_QUCHAKAN':// 退还逾期，去查看
          {
            setTab('return-overdue');
            this.$router.push({name: 'orderReturn'});
            break;
          }
          case 'ZULINYUQI_QUCHAKAN':// 租赁逾期，去查看
          {
            setTab('lease-overdue');
            this.$router.push({name: 'orderLease'});
            break;
          }
          case 'PEICHANGYUQI_QUCHAKAN':// 赔偿逾期，去查看
          {
            /*setTab('after-service-reparation-overdue');
            this.$router.push({name: 'orderAfterService'});
            break;*/
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../styles/mixin.scss";

  .dashboard-list-wp {
    width: 1020px;
    @include clearfix;

    .dashboard-card {
      width: 320px;
      box-shadow: none;
      float: left;
      margin-right: 20px;
      margin-top: 20px;

      .card-body {
        height: 74px;
        overflow: hidden;
      }
      .dashboard-card-footer {
        padding-top: 20px;
        text-align: right;
      }

    }

  }
</style>
